<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>选座位</title>
    <link rel="stylesheet" href="css/seat.css">
    <link rel="stylesheet" href="css/head.css">
    <link rel="stylesheet" href="css/reset.css">
</head>

<body>
    <!-- 头部 -->
    <header>
        <!-- 包裹起来定大小居中 -->
        <div>
            <!-- 猫眼电影图标+地点下拉列表 -->
            <div class="cat">
                <a href="">
                    <img src="img/maoyan_logo.png" alt="">
                    <h1>猫眼电影</h1>
                </a>
                <ul>
                    <li>
                        <a href="">成都
                            <span>▼</span>
                        </a>
                        <div class="white">
                        </div>
                        <div class="city">
                            <div class="position-city">
                                <span>定位城市 ：
                                    <a href="">成都</a>
                                </span>
                            </div>
                            <div class="town">
                                <span>A</span>
                                <span>B</span>
                                <span>C</span>
                                <span>D</span>
                                <span>E</span>
                                <span>F</span>
                                <span>G</span>
                                <span>H</span>
                                <span>I</span>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
            <!-- 导航栏 -->
            <nav>
                <a href="./index.html">首页</a>
                <a href="./movie.html">电影</a>
                <a href="./cinema.html">影院</a>
                <a href="./list.html">榜单</a>
                <a href="./register.html">注册</a>
                <a href="./personal.html">个人中心</a>
                <a href="./seat.html">选座</a>
                <!-- <a href="">热点</a> -->

            </nav>

            <!-- APP下载 搜索框 用户头像 -->
            <div class="head-left">
                <!-- APP下载 -->
                <div class="app">
                    <a href="">
                        <img src="img/app_logo.png" alt="">
                        <p>APP下载</p>
                        <span>▼</span>
                    </a>
                    <div>
                    </div>
                </div>
                <!-- 搜索 -->
                <div class="search">
                    <input type="text" placeholder="找影视剧">
                    <input type="submit" value="">
                </div>
                <!-- 用户头像 -->
                <div class="user">
                    <a href="">
                        <img src="img/user_logo.png" alt="">
                        <span>▼</span>
                    </a>
                    <div>
                        <a href="./login.html">登陆</a>
                       
                    </div>
                </div>
            </div>
        </div>
    </header>
    <!-- 占位 -->
    <div class="seat"></div>
    <!-- 内容 -->
    <main>
        <!-- 进度条 -->
        <div class="progress-bar">
            <div class="step first">
                <span class="step-num">1</span>
                <div class="bar">

                </div>
                <span class="step-text">选择影片场次</span>
            </div>
            <div class="step">
                <span class="step-num">2</span>
                <div class="bar">

                </div>
                <span class="step-text">选择座位</span>
            </div>
            <div class="step">
                <span class="step-num">3</span>
                <div class="bar">

                </div>
                <span class="step-text">14分种内付款</span>
            </div>
            <div class="step last">
                <span class="step-num">4</span>
                <div class="bar">

                </div>
                <span class="step-text">影院取票观影</span>
            </div>
        </div>
        <div class="place">
            <!-- 左边 -->
            <div class="place-left">
                <!-- 座位状态 -->
                <div class="place-nav">
                    <span>
                        <img src="img/kexuan.png" alt="">可选座位</span>
                    <span>
                        <img src="img/yishou.png" alt="">已售座位</span>
                    <span>
                        <img src="img/yixuan.png" alt="">已选座位</span>
                    <span>
                        <img src="img/qinglv.png" alt="">情侣座位</span>
                </div>
                <div class="place-container">
                    <!-- 座位序号 -->
                    <div class="row-id">
                        <span>1</span>
                        <span>2</span>
                        <span>3</span>
                        <span>4</span>
                        <span>5</span>
                        <span>6</span>
                        <span>7</span>
                        <span>8</span>
                        <span>9</span>
                    </div>
                    <!-- 屏幕 -->
                    <div class="screen-container">
                        <div class="screen">
                            银幕中央
                        </div>
                        <div class="screen-line">

                        </div>
                    </div>
                    <!-- 座位表 -->
                    <div class="row-wraper">
                        <div class="row">
                            <span></span>
                            <span></span>
                            <span></span>
                            <span></span>
                            <span></span>
                            <span></span>
                            <span></span>
                            <span></span>
                            <span></span>
                            <span></span>
                            <span></span>
                            <span></span>
                            <span></span>
                            <span></span>
                        </div>
                        <div class="row">
                            <span></span>
                            <span></span>
                            <span></span>
                            <span></span>
                            <span></span>
                            <span></span>
                            <span></span>
                            <span></span>
                            <span></span>
                            <span></span>
                            <span></span>
                            <span></span>
                            <span></span>
                            <span></span>
                        </div>
                        <div class="row">
                            <span></span>
                            <span></span>
                            <span></span>
                            <span></span>
                            <span></span>
                            <span></span>
                            <span></span>
                            <span></span>
                            <span></span>
                            <span></span>
                            <span></span>
                            <span></span>
                            <span></span>
                            <span></span>
                        </div>
                        <div class="row">
                            <span></span>
                            <span></span>
                            <span></span>
                            <span></span>
                            <span></span>
                            <span></span>
                            <span></span>
                            <span></span>
                            <span></span>
                            <span></span>
                            <span></span>
                            <span></span>
                            <span></span>
                            <span></span>
                        </div>
                        <div class="row">
                            <span></span>
                            <span></span>
                            <span></span>
                            <span></span>
                            <span></span>
                            <span></span>
                            <span></span>
                            <span></span>
                            <span></span>
                            <span></span>
                            <span></span>
                            <span></span>
                            <span></span>
                            <span></span>
                        </div>
                        <div class="row">
                            <span></span>
                            <span></span>
                            <span></span>
                            <span></span>
                            <span></span>
                            <span></span>
                            <span></span>
                            <span></span>
                            <span></span>
                            <span></span>
                            <span></span>
                            <span></span>
                            <span></span>
                            <span></span>
                        </div>
                        <div class="row">
                            <span></span>
                            <span></span>
                            <span></span>
                            <span></span>
                            <span></span>
                            <span></span>
                            <span></span>
                            <span></span>
                            <span></span>
                            <span></span>
                            <span></span>
                            <span></span>
                            <span></span>
                            <span></span>
                        </div>
                        <div class="row">
                            <span></span>
                            <span></span>
                            <span></span>
                            <span></span>
                            <span></span>
                            <span></span>
                            <span></span>
                            <span></span>
                            <span></span>
                            <span></span>
                            <span></span>
                            <span></span>
                            <span></span>
                            <span></span>
                        </div>
                        <div class="row">
                            <span></span>
                            <span></span>
                            <span></span>
                            <span></span>
                            <span></span>
                            <span></span>
                            <span></span>
                            <span></span>
                            <span></span>
                            <span></span>
                            <span></span>
                            <span></span>
                            <span></span>
                            <span></span>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 右边 -->
            <div class="place-right">
                <!-- 电影基本信息 -->
                <div class="place-film">
                    <div class="place-film-top">
                        <img src="img/xiaohonghua.jpg" alt="">
                        <div>
                            <h1>海王</h1>
                            <span>类型：
                                <p>动作，冒险，奇幻</p>
                            </span>
                            <span>时长：
                                <p>143分种</p>
                            </span>
                        </div>
                    </div>
                    <div class="place-film-bottom">
                        <span>影院 :
                            <p>承光国际影城</p>
                        </span>
                        <span>影厅 :
                            <p>5号激光厅</p>
                        </span>
                        <span>版本 :
                            <p>英语3D</p>
                        </span>
                        <span>场次 :
                            <p>今天12月17 13:45</p>
                        </span>
                        <span>票价 :
                            <p>￥33/张</p>
                        </span>
                    </div>
                </div>
                <!-- 座位信息 -->
                <div class="place-money">
                    <span>座位 :
                        <p>一次最多选4个座位</p>
                    </span>
                    <strong>请
                        <p>点击左侧</p>座位图选择座位</strong>
                    <span>总价 :
                        <p>￥0</p>
                    </span>
                </div>
                <!-- 电话信息 -->
                <div class="place-phone">
                    <div>
                        <input type="text" placeholder="输入手机号" maxlength="11" class="phonenum">
                    </div>
                    <div>
                        <input type="text" placeholder="输入验证码" maxlength="5" class="verification">
                        <input type="button" value="获取验证码" class="get-verification">
                    </div>
                    <div>
                        <input type="button" value="确认选座" class="confirm">
                    </div>
                </div>
            </div>
        </div>
    </main>
    <!-- 脚 -->
    <footer>
        <div>
            <p>商务合作邮箱:v@maoyan.com 客服电话:10105335违法和不良信息举报电话:4006018900</p>
            <p>投诉举报邮箱:tousujubao@meituan.com舞弊线索举报邮箱: wubijubao@maoyan.com</p>
            <p>友情链接:
                <a href="">美团网</a>
                <span>|</span>
                <a href="">美团下载</a>
                <span>|</span>
                <a href="">欢喜首映</a>
            </p>
            <p>◎2016猫眼电影 maoyan.com京ICP证160733号京ICP备16022489号-1京公网安备11010502030881号网络文化经营许可证电子公告服务规则</p>
            <p>北京猫眼文化传媒有限公司</p>
        </div>
    </footer>
</body>

</html>